<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width:500px;
			    height:300px ;
			}
			.start{
				width:50% ;
				list-style:none ;
				margin: 0;
				line-height:67px ;
				color:#ccc ;
				margin-left:30px ;
				float: left;
			}
			.start span{
				font-size:30px ;
				margin-left:10px ;
			}
			.start span:after{
				content:'☆';
			}
			.start .show:after,.start .show2:after{
				content:'★';
			}
			.inof{
				float: left;
				width:60px ;
				height:30px ;
				margin-top:20px ;
				text-align: center;
				display:none ;
				
			}
			.show{
				color:#999 ;
			}
			.show2{
				color:yellow;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="start">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="inof">
				1颗星
			</div>
		</div>
		<script>
			var start=document.querySelectorAll(".start span");
			var info=document.querySelector(".inof");
			var grades=["1颗星","2颗星","3颗星","4颗星","5颗星"];
			var active=-1;
			for(var i=0;i<start.length;i++){
				start[i].index=i;
				start[i].onmouseover=function(){setStar(this.index);};
				start[i].onmouseoout=function(){setStar(active);};
				start[i].onclick=setClick;
			}
			function setStar(nub){
				var name='';
				name=nub<2?'show':'show2';
				for(var i=0;i<start.length;i++){
					start[i].className= i<=nub?name:"";
					
				}
				info.style.display=nub<0?'none':'block';
				info.innerHTML=grades[nub];
			}
			function setClick(){
				active=this.index;
			}
		</script>
	</body>
</html>
